<%--
  Created by IntelliJ IDEA.
  User: Lning
  Date: 2020/11/30
  Time: 21:04
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DogBaby</title>
    <meta charset="UTF-8">
    <title>DogBaby</title>
    <style type="text/css">

        html{
            overflow-x: hidden;
            /*overflow-y: hidden;*/
        }
        #frame{
            position:absolute;
            width:800px;
            height:250px;
            overflow:hidden;
            border-radius:5px;
        }
        #dis{
            position:absolute;
            left:-50px;
            top:-10px;
            opacity:0.5;
        }
        #dis li{
            display:inline-block;
            width:200px;
            height:20px;
            margin:0 50px;
            float:left;
            text-align:center;
            color:blue;
            border-radius:10px;
            background: pink;
        }
        #photos img{
            float:left;
            width:800px;
            height:250px;
        }
        #photos{
            position:absolute;
            z-index:9;
            width:calc(800px * 5);
        }
        .play{
            animation:ma 20s ease-out infinite;
        }
        @keyframes ma {
            0%,20%{margin-left:0px}
            20%,40%{margin-left:-800px}
            40%,60%{margin-left:-1600px}
            60%,80%{margin-left:-2400px}
            80%,100%{margin-left:-3200px}

        }
        .num{
            position:absolute;z-index:10;
            display:inline-block;
            right:10px;
            top:215px;
            border-radius:100%;
            background:#f00;
            width:25px;
            height:25px;
            line-height:25px;
            cursor:pointer;
            color:#fff;
            text-align:center;
            opacity:0.8;
        }
        .num:hover{background:#00f;}
        .num:hover,#photos:hover{animation-play-state:paused;}
        .num:nth-child(2){margin-right:60px}
        .num:nth-child(3){margin-right:120px}
        .num:nth-child(4){margin-right:180px}
        .num:nth-child(5){margin-right:240px}
        #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}
        #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}
        #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}
        #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}
        #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}
        @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:-0px;}	}
        @keyframes ma2 {0%{margin-left:-1200px;}100%{margin-left:-600px;}	}
        @keyframes ma3 {0%{margin-left:-1200px;}100%{margin-left:-1200px;}	}
        @keyframes ma4 {0%{margin-left:-1200px;}100%{margin-left:-1800px;}	}
        @keyframes ma5 {0%{margin-left:-1200px;}100%{margin-left:-2400px;}	}




        .store {
            position: relative;
            display: block
        }

        .store-hide {
            width: 200px;
            height: 200px;
            background-color: #fff;
            margin-left: -15px;
            margin-top: 60px;
            border-top: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            display: none;
            position: absolute;
            top:10px;
            left: -14px;

        }

        .store:hover .store-hide {
            display: block
        }

        .html{
            overflow: hidden;
        }



        .logo{
            width:100%;
            height: 45px;
        }
        .logo1{
            width:400px;
            font-size: 15px;
            height:45px;
            margin-left:20px ;
            float: left;
            color:black;
            text-decoration: none
        }
        .logo2{
            width:100px;
            font-size: 15px;
            margin-left:200px;
            height:45px;
            float: left;
            color:black;
            text-decoration: none
        }
        .logo3{
            width:100px;
            font-size: 15px;
            height:45px;
            margin-left:10px ;
            float: left;
            color:black;
            text-decoration: none
        }
        .logo4{
            width:250px;
            font-size: 40px;
            height:80px;
            margin-left:50px;
            float: left;
            line-height:50px;
        }
        .logo5{
            width: 300px;
            font-size: 40px;
            height: 80px;
            margin-left:50px;
            float: left;
            line-height: 50px;
        }
        .logo6{
            width: 200px;
            font-size: 15px;
            height:40px;
            /*margin-left: 300px;*/
            float: left;
            border-color: cornflowerblue;
            line-height: 50px;
        }
        .logo7{
            width: 100px;
            font-size: 20px;
            height: 45px;
            margin-left: 0px;
            float: left;
            background: cornflowerblue;
            line-height: 50px;
        }
        .logo8{
            float: right;
        }
        .logo9{
            /*float: left;*/
            height: 80px;
            background-color:lightskyblue;
        }
        .logo10,.logo11,.logo12,
        .logo13,.logo14,.logo15,.logo16{
            color:black;
            width: 60px;
            height: 40px;
            font-size: 15px;
            margin-left:80px;
            float: left;
            line-height:80px;
            text-decoration: none
        }
        /*.logo16{*/
        /*    color:black;*/
        /*    width: 80px;*/
        /*    height: 40px;*/
        /*    font-size: 15px;*/
        /*    margin-top: 32px;*/
        /*    margin-left:80px;*/
        /*    float: left;*/
        /*}*/

        .store-item{
            line-height: 25px;
        }

        .logo16 a{
            color: black;
            text-decoration: none;
        }


        .logo17{
            width:600px;
            font-size: 40px;
            height:250px;
            margin-left:100px;
            float: left;
            line-height:50px;
        }
        .logo17 img{
            width:600px;
            height:200px;
        }
        .logo18{
            width:200px;
            font-size: 20px;
            /*height:20px;*/
            /*margin-left:200px;*/
            line-height:50px;
            border-bottom: 1px solid;
        }
        .logo19{
            width: 200px;
            font-size: 15px;
            height: 150px;
            /*margin-left: 200px;*/
            line-height: 100px;
        }
        .logo20{
            background-color:deepskyblue;
            width: 250px;
            height: 250px;
            float: left;
            margin-left: 210px;
        }
        .logo21{
            width: 150px;
            font-size: 15px;
            height: 200px;
            /*margin-left:200px;*/
            float: left;
            line-height: 100px;
            background-color: pink;
        }
        .logo22{
            width: 150px;
            font-size: 15px;
            height: 200px;
            /*margin-left:200px;*/
            float: left;
            line-height: 100px;
        }
        .logo23{
            width: 150px;
            font-size: 15px;
            height: 200px;
            /*margin-left: 200px;*/
            float: left;
            line-height: 100px;
        }
        .logo24{
            float: left;
        }
        .logo24-1{
            /*margin-left:200px;*/
        }
        .logo25,.logo26,.logo27{
            width: 350px;
            height:200px ;
            float: left;
        }
        .logo25{
            margin-left:65px;
        }
        .logo28 {
            width: 1180px;
            font-size: 20px;
            color: lightskyblue;
            /*height:20px;*/
            margin-left: 100px;
            line-height: 50px;
            border-bottom: 1px solid;

        }
        .logo29{
            width: 1180px;
            font-size: 20px;
            color: lightskyblue;
            /*height:20px;*/
            margin-left: 100px;
            line-height: 50px;
            border-bottom: 1px solid;
        }
        .logo30,.logo31,.logo32{
            width: 250px;
            font-size: 20px;
            color: lightskyblue;
            /*height:20px;*/
            margin-left: 5px;
            line-height: 50px;
            border-bottom: 1px solid;
            float: left;
        }
        .logo33{
            background:url(img/logo6.png);
            width: 1247px;
            height: 200px;
            float: left;
            margin-left:-40px;
            background-position: center;
            background-repeat: no-repeat;
        }
        .logo34{
            width: 250px;
            font-size: 10px;
            color: lightskyblue;
            /*height:20px;*/
            margin-left: 5px;
            line-height: 50px;
            /*border-bottom: 1px solid;*/
            float: left;
            text-decoration: none
        }
        .logo35{
            width: 250px;
            font-size: 5px;
            color: lightskyblue;
            /*height:20px;*/
            margin-left: 100px;
            line-height: 50px;
            /*border-bottom: 1px solid;*/
            float: left;
        }
        .logo36{
            width: 250px;
            font-size: 20px;
            color: black;
            /*height:20px;*/
            margin-left: 5px;
            line-height: 100px;
            border-bottom: 1px solid;
            float: left;
        }
        .logo37{
            width: 300px;
            font-size: 8px;
            height: 10px;
            margin-left:540px;
            line-height: 100px;
        }
        .logo38{
            width: 200px;
            font-size: 8px;
            height: 10px;
            margin-left:600px;
            line-height: 120px;
        }
        .center{
            width: 1180px;
            margin:auto;
        }
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

    </style>
</head>
<body>
<div class="logo">
    <a href="javascript:;" class="logo1">欢迎来到萌宠后宫！ </a>
</div>
</div>

    <a href="login.jsp" class="logo2">立即登录</a>
    <a href="register.jsp" class="logo3">免费注册</a>
<div id="banner">
    <!-- 显示当前用户，参数需和登录页用户名字段相符 -->
    <div id="banneruser">当前用户:<a href=""><%=request.getParameter("username") %></a></div>
</div>
</div>
<div class="clearfix">
    <img class="logo4" src="img/logo1.png">
    <img class="logo5" src="img/logo2.png">
    <form class="logo8">
        <input type="text" class="logo6"/>
        <button class="logo7">搜索</button>
    </form>
</div>





<div class="logo9 clearfix">
    <div class="center clearfix">
        <a href="javascript:;" class="logo10">首页</a>
        <a href="dog.jsp" class="logo11">狗狗</a>
        <a href="cat.jsp" class="logo12">猫咪</a>
        <a href="fish.jsp" class="logo13">水族</a>
        <a href="smallpet.jsp" class="logo14">小宠</a>
        <a href="footpet.jsp" class="logo15">爬虫</a>
        <div class="store nav-item logo16">
            <a href="javascript:;">
                <i class="fas fa-store fin"></i>
                <div>宠物商城</div>
            </a>
            <div class="store-hide">
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>
                <div class="store-item">
                    <a href="javascript:;">
                        逗猫棒
                    </a>
                </div>


            </div>
        </div>
        <!--<a href="javascript:;" class="logo16">宠物商城</a>-->
    </div>
</div>

<div class="clearfix">
    <div class="center">
        <div class="logo17">
            <div id="frame" >
                <a id="a1" class="num">1</a>
                <a id="a2" class="num">2</a>
                <a id="a3" class="num">3</a>
                <a id="a4" class="num">4</a>
                <a id="a5" class="num">5</a>
                <div id="photos" class="play">
                    <img src="img/logo.jpg " >
                    <img src="img/logo101.jpg " >
                    <img src="img/logo102.jpg" >
                    <img src="img/logo103.jpg" >
                    <img src="img/logo104.jpg" >
                    <!--
                    <ul id="dis">
                         <li>爱的引导</li>
                         <li>狗狗</li>
                         <li>海豚</li>
                         <li>猫猫</li>
                         <li>仓鼠</li>
                     </ul>
                     -->
                </div>
            </div>
        </div>
        <div class="logo20">
            <div class="logo18">热门专题</div>
            <div class="logo19">动态文章</div>
        </div>
    </div>
</div>


<div class="clearfix">
    <div class="logo28">宠物百科</div>
</div>


<div class="clearfix">
    <div class="center">
        <div class="clearfix logo25">
            <img class="logo21" src="img/logo4.jpg">
            <div class="logo24 logo24-1">
                <ul>
                    <li>狗狗</li>
                    <li><a href="dog1.jsp" >纯种拉布拉多</a></li>
                    <li><a href="dog2.jsp" >西伯利亚雪橇犬</a></li>
                    <li><a href="dog3.jsp" >威尔士柯基犬</a></li>
                    <li><a href="dog4.jsp" >德国牧羊犬</a></li>
                    <li><a href="dog5.jsp" >英国古代牧羊犬</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix logo26">
            <img class="logo22" src="img/logo5.jpg">
            <div class="logo24">
                <ul>
                <li>猫咪</li>
                <li><a href="cat1.jsp" >异国短毛猫</a></li>
                <li><a href="cat2.jsp" >美国短毛猫</a></li>
                <li><a href="cat3.jsp" >英国短毛猫</a></li>
                <li><a href="cat4.jsp" >俄罗斯短毛猫</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix logo27">
            <img class="logo23" src="img/logo3.jpg">
            <div class="logo24">
                <ul>
                    <li>小宠和爬虫</li>
                    <li><a href="smallpet1.jsp" >巴西红耳龟</a></li>
                    <li><a href="smallpet2.jsp" >豹纹守宫</a></li>
                    <li><a href="smallpet3.jsp" >独角仙</a></li>
                    <li><a href="smallpet4.jsp" >红玫瑰蜘蛛</a></li>
                    <li><a href="smallpet5.jsp" >毛丝鼠</a></li>
                </ul>
            </div>
        </div>
    </div>


    <div class="clearfix ">
        <div class="logo29"></div>

    </div>

    <div class="clearfix">
        <div class="logo35">
            <div class="logo30">宠物用品</div>
            <a href="1.jsp" class="logo34">泰迪贵宾成犬粮狗粮</a>
            <a href="2.jsp" class="logo34">小型成犬专用粮</a>
            <a href="3.jsp" class="logo34">中小型犬成犬粮</a>
            <a href="4.jsp" class="logo34">超耐咬网球训导</a>
            <a href="5.jsp" class="logo34">双色TPR棍子</a>
            <a href="6.jsp" class="logo34">狗狗玩具橡胶球</a>
        </div>
        <div class="logo35">
            <div class="logo31">宠物服务</div>
            <a href="24.jsp" class="logo34">逗猫棒</a>
            <a href="25.jsp" class="logo34">猫抓板</a>
            <a href="26.jsp" class="logo34">圆形猫转盘</a>
            <a href="27.jsp" class="logo34">沐浴露</a>
            <a href="28.jsp" class="logo34"> 指甲剪</a>
            <a href="29.jsp" class="logo34">毛巾</a>
        </div>
        <div class="logo35">
            <div class="logo32">宠物领养</div>
            <div class="logo36">猫咪</div>
            <div class="logo36">狗狗</div>
            <div class="logo36">仓鼠</div>
        </div>

    </div>

</div>
<div class="logo33">
    <div class="logo37">地址：中国.河南.郑州市郑东新区龙子湖高校区15号 邮编450046</div>
    <div class="logo38">信息维护：第四小组14号字</div>
</div>

</body>
</html>
